/* eslint-disable eqeqeq */
import React, { useState, useEffect } from 'react';
import { If } from 'babel-plugin-jsx-control-statements';
import { Form, Select, Input, InputNumber, Button, Space, Table, Divider } from 'antd';
import Cookies from 'js-cookie';
import Map from '@/components/map';
import RequestApi from '@/utils/request';
import css from './index.scss';

export default () => {
	const { Option } = Select;
	const columns = [
		{
			title: '操作',
			dataIndex: 'id',
			key: 'id',
			render: () => {
				return <Button type="link">详情</Button>;
			},
		},
		{
			title: '停车场名称',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '地址',
			dataIndex: 'address',
			key: 'address',
		},
	];
	const districtId = Cookies.get('distinctId');
	const [form] = Form.useForm();
	// 通过districtId找到districtName并直接赋值给表单
	useEffect(() => {
		RequestApi.connection('get', 'district/getList').then((response) => {
			const allDdistrict = response.data;
			for (let index = 0; index < allDdistrict.length; index += 1) {
				if (allDdistrict[index].id == districtId) {
					console.log(allDdistrict[index].name);
					const { name } = allDdistrict[index];
					form.setFieldsValue({
						districtName: name,
						queryRadius: 500,
					});
					break;
				}
			}
		});
	}, [districtId, form]);
	const originBody = {
		address: null,
		districtId,
		isInImportantBusinessCircle: null,
		manageOrgName: null,
		name: null,
		parkLevel: null,
		parkLotType: null,
		propertyOrgName: null,
		queryRadius: null,
	};
	const [data, setData] = useState();
	const [body, setBody] = useState(originBody);
	useEffect(() => {
		RequestApi.connection('post', `parkLot/query`, body).then((response) => {
			setData(response.data);
		});
	}, [body]);
	function onFinish(values) {
		const body = {};
		body.districtId = districtId;
		body.address = values.address;
		body.isInImportantBusinessCircle = values.isInImportantBusinessCircle;
		body.manageOrgName = values.manageOrgName;
		body.name = values.parkName;
		body.parkLevel = values.parkLevel;
		body.parkLotType = values.parkLotType;
		body.propertyOrgName = values.propertyOrgName;
		body.queryRadius = values.queryRadius;
		setBody(body);
	}
	function reset() {
		form.resetFields();
		setBody(originBody);
	}
	const [nearPark, setNearPark] = useState();
	const [currentPark, setCurrentPark] = useState('无');
	const [mainPark, setMainPark] = useState();
	const findParkLot = (record) => {
		setCurrentPark(record.name);
		setMainPark([record.entranceLongitude, record.entranceLatitude]);
		const values = {
			entranceLatitude: record.entranceLatitude,
			entranceLongitude: record.entranceLongitude,
			maxLat: null,
			maxLng: null,
			minLat: null,
			minLng: null,
			queryRadius: 500,
		};
		RequestApi.connection('post', `/parkLot/queryNearParkLot`, values).then((response) => {
			setNearPark(response.data);
		});
	};
	useEffect(() => {}, [currentPark]);
	return (
		<div className={css.app}>
			<div className={css.top}>
				<Form form={form} layout="inline" onFinish={onFinish}>
					<Form.Item name="districtName" label="所在区域:" className={css.item}>
						<Input className={css.item_width} disabled />
					</Form.Item>
					<Form.Item label="停车场类型:" name="parkLotType" className={css.item}>
						<Select className={css.item_width}>
							<Option value={1}>配建</Option>
							<Option value={2}>公共</Option>
							<Option value={3}>路内</Option>
							<Option value={4}>临时</Option>
						</Select>
					</Form.Item>
					<Form.Item label="是否重要商圈:" name="isInImportantBusinessCircle" className={css.item}>
						<Select className={css.item_width}>
							<Option value={0}>否</Option>
							<Option value={1}>是</Option>
						</Select>
					</Form.Item>
					<Form.Item label="停车场等级:" name="parkLevel" className={css.item}>
						<Select className={css.item_width}>
							<Option value={0}>普通</Option>
							<Option value={1}>特级</Option>
						</Select>
					</Form.Item>
					<Form.Item label="停车场名称:" name="parkName" className={css.item}>
						<Input className={css.item_width} />
					</Form.Item>
					<Form.Item label="停车场地址:" name="address" className={css.item}>
						<Input className={css.item_width} />
					</Form.Item>
					<Form.Item label="产权单位:" name="propertyOrgName" className={css.item}>
						<Input className={css.item_width} />
					</Form.Item>
					<Form.Item label="管理单位:" name="manageOrgName" className={css.item}>
						<Input className={css.item_width} />
					</Form.Item>
					<Form.Item label="地图查询半径(m):" name="queryRadius" className={css.item}>
						<InputNumber className={css.item_width} />
					</Form.Item>
					<Form.Item className={css.item}>
						<Space size="large">
							<Button type="primary" htmlType="submit">
								提交
							</Button>
							<Button type="primary" onClick={reset}>
								重置
							</Button>
						</Space>
					</Form.Item>
				</Form>
				<div className={css.data}>
					<If condition={data !== undefined}>
						<Table
							dataSource={data}
							columns={columns}
							pagination={false}
							scroll={{ y: '300px' }}
							onRow={(record) => ({
								onClick: () => {
									findParkLot(record);
								},
							})}
						/>
					</If>
				</div>
				<div className={css.near}>
					<h1>
						附近停车场
						<span>(</span>
						{currentPark === undefined ? '无' : currentPark}
						<span>)</span>
					</h1>
					{nearPark?.map((item, index) => {
						return (
							<div key={item.id}>
								<span>{index + 1}</span>
								<span>、</span>
								<span>{item.name}</span>
								<br />
								<span>{item.address}</span>
								<Divider />
							</div>
						);
					})}
				</div>
			</div>
			<div className={css.top}>
				<Map isInput={false} park={nearPark} mainPark={mainPark} />
			</div>
		</div>
	);
};
